<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送 GET 请求</title>
  </head>
  <body>
    <button>点击发送 AJAX 请求</button>
    <script>
      //获取 button 按钮
      let btn = document.querySelector("button");

      //绑定事件  GET
      btn.onclick = function () {
        //发送 AJAX 请求   
        //  url 传参两种形式  
        // query    id=100
        // params   /
        //1. 创建请求对象
        let xhr = new XMLHttpRequest();
        //2. 初始化  设置请求行的报文
        // xhr.open('get', 'http://127.0.0.1:8080/server?id=100'); // query
        xhr.open('get', 'http://127.0.0.1:8080/server/100');// params
        //请求头传递参数 token: 1231241241412
        xhr.setRequestHeader('token', '1231241241412'); // set 设置  request 请求  header 头
        //3. 发送
        xhr.send();
        //4. 绑定事件 处理响应结果
        xhr.onreadystatechange = function(){
            // on  when 当....时候  
            // readyState 是 xhr 对象的一个属性, 标识当前请求的状态 0 1 2 3 4
            //判断
            if(xhr.readyState === 4){
                //输出响应结果
                //响应状态码
                console.log(xhr.status);
                //响应状态字符串
                console.log(xhr.statusText);
                //响应头信息
                console.log(xhr.getAllResponseHeaders());
                //响应体信息
                console.log(xhr.response);
            }
        }
      };
    </script>
  </body>
</html>
